<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card class="box-card">
    <h1 class="container">订单信息</h1>
    <el-table :data="tableData" style="width: 100%" align="center">
      <el-table-column prop="merchant" label="商家名称" width="180">
      </el-table-column>
      <el-table-column prop="name" label="菜名" width="180"> </el-table-column>
      <el-table-column prop="price" label="价格" width="180"> </el-table-column>
      <el-table-column prop="gettime" label="下单时间" width="180">
      </el-table-column>
      <el-table-column prop="endtime" label="到达时间" width="180">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="10"
      >
      </el-pagination>
    </div>
  </el-card>
</template>
  
  <script>
export default {
  created() {},
  data() {
    return {
      // 订单信息
      tableData: [
        {
          merchant: "张三",
          name: "桂花酒梁",
          price: "￥14",
          gettime: "12:00",
          endtime: "16:00",
        },
        {
          merchant: "王五",
          name: "桂花酒梁",
          price: "￥14",
          gettime: "12:00",
          endtime: "16:00",
        },
        {
          merchant: "赵四",
          name: "桂花酒梁",
          price: "￥14",
          gettime: "12:00",
          endtime: "16:00",
        },
        {
          merchant: "五六",
          name: "桂花酒梁",
          price: "￥14",
          gettime: "12:00",
          endtime: "16:00",
        },
        {
          merchant: "书宜烧仙草",
          name: "桂花酒梁",
          price: "￥14",
          gettime: "12:00",
          endtime: "16:00",
        },
      ],
      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
  
<style scoped>
.container {
  text-align: center;
}
.block {
  margin-top: 20px;
}
</style>
  